import { h, Component } from 'preact';
import s from './style';
import Modal from '~/components/Modal';
import classNames from 'classnames';
import qrcode from '~/assets/qrcode.png';
import { connect } from 'preact-redux';
class PayAttention extends Component {
	constructor() {
		super();
		this.state = {
			open: true
		};
	}
	onClose = () => {
		this.setState({
			open: false
		});
		setTimeout(this.onClosePayAttention,270);
	}
	onClosePayAttention = () => {
		const { dispatch } = this.props;
		dispatch({
			type:'closeAttention'
		});
	}
	render() {
		const { isOpen } = this.props;
		const { open } = this.state;
		const style = {
			content: {
				width: '91%',
				overflow:'visible',
				border: '0.28125rem solid #fcbe69',
				'border-bottom': '0.28125rem solid #d29e57',
				right: 'auto'
			}
		};

		const modalProps = {
			isOpen,
			style,
			className:open ? s.wrap : s.close,
			contentLabel:''
		};


		const prizeName = 'cosmetic';
		return (
			<Modal { ...modalProps }>
				<div className={s.header}>
					<div className={s.close} onClick={this.onClose}><i className="icon-close-a" /></div>
					<div className={s.title}>活动规则</div>
				</div>
				<div className={s.body}>
					<div className={s.text}>
						活动需已关注粉丝才能参与哦，
						<br />
						长按二维码关注我们吧！
					</div>
					<div className={s.qrcodebox}>
						<img src={qrcode} className={s.qrcode} />
					</div>
				</div>
			</Modal>
		);
	}
}

export default connect()(PayAttention);
